Angular Material একটি শক্তিশালী UI লাইব্রেরি, যা অ্যাঙ্গুলার অ্যাপ্লিকেশন তৈরি করার জন্য ম্যাটেরিয়াল ডিজাইন কম্পোনেন্ট সরবরাহ করে। Angular Material এর কম্পোনেন্টগুলো রেসপন্সিভ, কাস্টমাইজযোগ্য, এবং অ্যাক্সেসিবল থাকে, যা অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় ও ব্যবহারকারীবান্ধব করে তোলে।

এখানে Angular Material এর বেসিক কিছু কম্পোনেন্টের পরিচিতি দেওয়া হলো:

১. Button (ম্যাট বাটন)

MatButtonModule ব্যবহার করে Angular Material এ বাটন তৈরি করা হয়। এটি সাধারণ বাটন, রাইজড বাটন, ফ্ল্যাট বাটন ইত্যাদি বিভিন্ন ধরনের বাটন তৈরি করতে সাহায্য করে।

উদাহরণ:

<button mat-button>Basic Button</button>
<button mat-raised-button color="primary">Raised Button</button>
<button mat-flat-button color="accent">Flat Button</button>

ইমপোর্ট:

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [MatButtonModule],
})
export class AppModule {}

২. Input Field (ম্যাট ইনপুট)

Angular Material এর MatInputModule ব্যবহার করে বিভিন্ন ইনপুট ফিল্ড তৈরি করা যায়। এটি সাধারণ ইনপুট ফিল্ডের পাশাপাশি ফর্ম কন্ট্রোল, ভ্যালিডেশন, এবং ডেটা বাইন্ডিং সাপোর্ট করে।

উদাহরণ:

<mat-form-field>
  <mat-label>Enter your name</mat-label>
  <input matInput placeholder="Ex. John Doe">
</mat-form-field>

ইমপোর্ট:

import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [MatInputModule],
})
export class AppModule {}

৩. Card (ম্যাট কার্ড)

MatCardModule ব্যবহার করে কার্ড কম্পোনেন্ট তৈরি করা যায়, যা ইমেজ, টেক্সট, বা অন্যান্য কন্টেন্ট প্রদর্শনের জন্য ব্যবহার করা হয়। এটি একটি কনটেইনার হিসাবে কাজ করে যা বিভিন্ন কন্টেন্ট গুছিয়ে প্রদর্শন করতে সহায়ক।

উদাহরণ:

<mat-card>
  <mat-card-header>
    <mat-card-title>Card Title</mat-card-title>
    <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>This is a simple card.</p>
  </mat-card-content>
</mat-card>

ইমপোর্ট:

import { MatCardModule } from '@angular/material/card';

@NgModule({
  imports: [MatCardModule],
})
export class AppModule {}

৪. Checkbox (ম্যাট চেকবক্স)

MatCheckboxModule ব্যবহার করে চেকবক্স তৈরি করা যায়। এটি সাধারণভাবে ফর্মে ব্যবহারকারীর নির্বাচনের জন্য ব্যবহৃত হয়।

উদাহরণ:

<mat-checkbox>Accept terms and conditions</mat-checkbox>

ইমপোর্ট:

import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  imports: [MatCheckboxModule],
})
export class AppModule {}

৫. Select Dropdown (ম্যাট সিলেক্ট)

MatSelectModule ব্যবহার করে সিলেক্ট ড্রপডাউন তৈরি করা হয়, যা ব্যবহারকারীদের বিভিন্ন অপশন থেকে একটি নির্বাচন করতে দেয়।

উদাহরণ:

<mat-form-field>
  <mat-label>Choose a fruit</mat-label>
  <mat-select>
    <mat-option value="apple">Apple</mat-option>
    <mat-option value="banana">Banana</mat-option>
    <mat-option value="orange">Orange</mat-option>
  </mat-select>
</mat-form-field>

ইমপোর্ট:

import { MatSelectModule } from '@angular/material/select';

@NgModule({
  imports: [MatSelectModule],
})
export class AppModule {}

৬. Sidenav (ম্যাট সাইডনেভ)

MatSidenavModule ব্যবহার করে সাইডবার তৈরি করা হয়, যা সাধারণত ন্যাভিগেশন মেনু হিসেবে ব্যবহৃত হয়। এটি ব্যবহারকারীদের একটি পার্শ্ববর্তী মেনু দিয়ে অ্যাপ্লিকেশন নেভিগেট করতে সহায়তা করে।

উদাহরণ:

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
  <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

ইমপোর্ট:

import { MatSidenavModule } from '@angular/material/sidenav';

@NgModule({
  imports: [MatSidenavModule],
})
export class AppModule {}

৭. Toolbar (ম্যাট টুলবার)

MatToolbarModule ব্যবহার করে অ্যাপ্লিকেশনের টুলবার তৈরি করা হয়। এটি সাধারণত অ্যাপ্লিকেশনের শীর্ষে থাকে এবং ইউজার ইন্টারফেসের বিভিন্ন অপশন ও ন্যাভিগেশন প্রদর্শন করতে সাহায্য করে।

উদাহরণ:

<mat-toolbar color="primary">
  <span>My Application</span>
</mat-toolbar>

ইমপোর্ট:

import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
  imports: [MatToolbarModule],
})
export class AppModule {}

৮. Dialog (ম্যাট ডায়ালগ)

MatDialogModule ব্যবহার করে পপ-আপ ডায়ালগ তৈরি করা হয়। এটি সাধারণত ইন্টারঅ্যাকটিভ পপ-আপ উইন্ডো প্রদর্শন করতে ব্যবহৃত হয়।

উদাহরণ:

import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog-example',
  template: '<button mat-button (click)="openDialog()">Open Dialog</button>',
})
export class DialogExampleComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(DialogContentExampleDialog);
  }
}

ইমপোর্ট:

import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [MatDialogModule],
})
export class AppModule {}

Angular Material এর বেসিক কম্পোনেন্টস অ্যাঙ্গুলার অ্যাপ্লিকেশন তৈরি করার সময় গুরুত্বপূর্ণ ভূমিকা পালন করে। এই কম্পোনেন্টগুলো responsive এবং customizable হতে পারে এবং আপনাকে দ্রুত, আধুনিক, এবং ব্যবহারকারী-বান্ধব ইন্টারফেস তৈরি করতে সাহায্য করে। Angular Material এর বিভিন্ন কম্পোনেন্ট যেমন Button, Input, Card, Checkbox, Select, Sidenav, Toolbar, Dialog ইত্যাদি ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে একটি পেশাদার লুক দিতে পারেন।

Angular Material এর Button কম্পোনেন্ট একটি গুরুত্বপূর্ণ UI উপাদান, যা অ্যাঙ্গুলার অ্যাপ্লিকেশনগুলিতে ব্যবহারকারীদের সাথে যোগাযোগের জন্য ব্যবহার করা হয়। Angular Material বাটন কম্পোনেন্টটি ম্যাটেরিয়াল ডিজাইন গাইডলাইন অনুসরণ করে এবং এটি বিভিন্ন ধরনের স্টাইল এবং ফিচার সরবরাহ করে, যেমন raised, flat, stroked, এবং icon buttons। এগুলো অ্যাপ্লিকেশনের ডিজাইন এবং ইন্টারেকশন আরও উন্নত করে।

বাটন কম্পোনেন্টের বৈশিষ্ট্য

Angular Material এর বাটন কম্পোনেন্টটির কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য:

• Flat Buttons: সাধারণ বাটন, যা একেবারে ফ্ল্যাট ডিজাইনে থাকে।
• Raised Buttons: বাটনের উপরে শ্যাডো থাকে, যা এটিকে আরও দৃষ্টিনন্দন করে তোলে।
• Stroked Buttons: একটি আউটলাইন সহ বাটন, যার ভেতরের অংশ সাদা বা ট্রান্সপারেন্ট থাকে।
• Icon Buttons: শুধুমাত্র একটি আইকন ব্যবহার করে তৈরি বাটন।
• Disabled State: বাটনটি অক্ষম (disabled) অবস্থায় থাকতে পারে।
• Color Options: বাটনের রঙ কাস্টমাইজ করা যায়, যেমন primary, accent, বা warn।

বাটন ব্যবহার করা

Angular Material বাটন ব্যবহার করতে, প্রথমে আপনাকে MatButtonModule ইমপোর্ট করতে হবে। তারপর HTML এ বাটন কম্পোনেন্ট ব্যবহার করা যাবে।

১. app.module.ts ফাইলে MatButtonModule ইমপোর্ট করা

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    MatButtonModule
  ]
})
export class AppModule { }

২. HTML-এ বাটন ব্যবহার করা

<button mat-button>Flat Button</button>
<button mat-raised-button>Raised Button</button>
<button mat-stroked-button>Stroked Button</button>
<button mat-icon-button>
  <mat-icon>home</mat-icon>
</button>
<button mat-button color="primary">Primary Button</button>
<button mat-raised-button color="accent">Accent Button</button>
<button mat-button color="warn">Warn Button</button>

বাটন ট্যাগের বিভিন্ন ভেরিয়েন্ট

১. Flat Button

ফ্ল্যাট বাটন সাধারণত টেক্সট দিয়ে তৈরি হয় এবং এতে কোন শ্যাডো বা বর্ডার থাকে না।

<button mat-button>Flat Button</button>

২. Raised Button

Raised button বা উঁচু বাটনে শ্যাডো এবং ভিন্ন রঙের ব্যাকগ্রাউন্ড থাকে। এটি ব্যবহারকারীর কাছে একটি কার্যকরী এবং দৃশ্যমান বাটন হিসাবে উপস্থিত হয়।

<button mat-raised-button>Raised Button</button>

৩. Stroked Button

Stroked button একটি আউটলাইন সহ বাটন, যা অন্যান্য বাটনের চেয়ে কিছুটা হালকা দেখায়।

<button mat-stroked-button>Stroked Button</button>

৪. Icon Button

Icon button শুধুমাত্র একটি আইকন দিয়ে তৈরি হয়, এটি সাধারণত অ্যাপ্লিকেশনের বিভিন্ন অ্যাকশন বোতাম হিসেবে ব্যবহৃত হয়।

<button mat-icon-button>
  <mat-icon>home</mat-icon>
</button>

৫. Colored Buttons

Angular Material এর বাটন কম্পোনেন্টে আপনি রঙ পরিবর্তন করতে পারেন, যেমন primary, accent, বা warn।

<button mat-button color="primary">Primary Button</button>
<button mat-raised-button color="accent">Accent Button</button>
<button mat-button color="warn">Warn Button</button>

বাটন ক্লিক ইভেন্ট হ্যান্ডলিং

Angular Material বাটনে ক্লিক ইভেন্ট হ্যান্ডল করতে (click) ডিরেকটিভ ব্যবহার করা হয়।

<button mat-raised-button (click)="onClick()">Click Me</button>

এখানে onClick() একটি ফাংশন হবে, যা TypeScript ফাইলে ডিফাইন করতে হবে।

export class AppComponent {
  onClick() {
    console.log('Button Clicked!');
  }
}

বাটন ডিজেবল করা

বাটনটিকে ডিফল্ট অবস্থায় অক্ষম (disabled) করতে, [disabled] প্রোপার্টি ব্যবহার করা হয়।

<button mat-raised-button [disabled]="isDisabled">Disabled Button</button>

এখানে isDisabled একটি বুলিয়ান ভেরিয়েবল হবে যা TypeScript ফাইলে ডিফাইন করা হবে।

export class AppComponent {
  isDisabled = true;
}

Angular Material এর বাটন কম্পোনেন্ট ব্যবহার করা সহজ এবং এটি অ্যাপ্লিকেশনটির UI-তে একটি আধুনিক এবং ইন্টারেকটিভ উপাদান যোগ করে। বিভিন্ন ধরনের বাটন যেমন flat, raised, stroked, এবং icon buttons ব্যবহার করে আপনার অ্যাপ্লিকেশনকে আরও উন্নত এবং ব্যবহারকারীর জন্য সুবিধাজনক করে তোলা সম্ভব। Angular Material এর বাটন কম্পোনেন্টের কাস্টমাইজেশন ফিচার এবং ইভেন্ট হ্যান্ডলিং সিস্টেম ডেভেলপারদের জন্য একটি শক্তিশালী টুল হয়ে দাঁড়ায়।

Angular Material একটি শক্তিশালী UI লাইব্রেরি, যা অনেক ধরনের কাস্টমাইজেবল বাটন সরবরাহ করে। এই বাটনগুলো ম্যাটেরিয়াল ডিজাইনের গাইডলাইন অনুসরণ করে এবং অ্যাপ্লিকেশনের ডিজাইনে উন্নতমানের এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য প্রস্তুত করা হয়েছে। এখানে বিভিন্ন ধরনের বাটন যেমন Basic Button, Raised Button, Icon Button, এবং Floating Action Button (FAB) এর বিস্তারিত ব্যাখ্যা দেয়া হলো।

1. Basic Button (বেসিক বাটন)

Basic Button হলো সাদামাটা বাটন যা শুধুমাত্র একটি সাধারণ ক্লিকযোগ্য এলিমেন্ট হিসেবে কাজ করে। এটি কোনো শেড বা উঁচুতা ছাড়া একটি সাধারণ স্টাইলের বাটন।

ব্যবহার:

<button mat-button>Basic Button</button>

• mat-button ডিরেক্টিভ ব্যবহার করা হয়।
• এটি সাধারণত শুধুমাত্র টেক্সট দেখায় এবং কোনো শ্যাডো বা উত্তোলন (elevation) থাকে না।
• এটি বিভিন্ন ধরনের অ্যাকশন বা ইন্টারঅ্যাকশনের জন্য উপযুক্ত।

2. Raised Button (রেইজড বাটন)

Raised Button হলো একটি বাটন যার নিচে একটি শ্যাডো থাকে, ফলে এটি অন্য উপাদানগুলির তুলনায় একটু উঁচুতে থাকে। এই বাটনটি প্রধান অ্যাকশন বাটন হিসেবে ব্যবহৃত হয় এবং এটি ব্যবহারকারীদের নজর আকর্ষণ করতে সহায়তা করে।

ব্যবহার:

<button mat-raised-button>Raised Button</button>

• mat-raised-button ডিরেক্টিভ ব্যবহার করা হয়।
• এটি একটি সাইড শ্যাডো সহ বাটন, যা স্টাইলের মধ্যে এক্সট্রা ডিপথ তৈরি করে।
• এর মাধ্যমে গুরুত্বপূর্ণ অ্যাকশন বা অপশনগুলো প্রদর্শন করা যায়।

কাস্টম রং সহ রেইজড বাটন:

<button mat-raised-button color="primary">Primary Raised Button</button>

এখানে color="primary" দিয়ে বাটনের রঙ নির্ধারণ করা হয়েছে।

3. Icon Button (আইকন বাটন)

Icon Button হলো একটি বাটন যা শুধুমাত্র একটি আইকন ধারণ করে। এটি সাধারণত ছোট সাইজের অ্যাকশন বাটন হিসেবে ব্যবহৃত হয়, যেখানে টেক্সটের পরিবর্তে আইকন ব্যবহার করা হয়।

ব্যবহার:

<button mat-icon-button>
  <mat-icon>home</mat-icon>
</button>

• mat-icon-button ডিরেক্টিভ ব্যবহার করা হয়।
• mat-icon এলিমেন্টের মাধ্যমে আইকন যোগ করা হয়।
• এটি সাধারণত টুলবার বা সাইড মেনুর আইকন হিসেবে ব্যবহৃত হয়।

4. Floating Action Button (FAB) (ফ্লোটিং অ্যাকশন বাটন)

Floating Action Button (FAB) একটি বিশেষ ধরনের বাটন যা অ্যাপ্লিকেশনের স্ক্রিনের নিচে বা মাঝখানে সাসপেন্ডেড অবস্থায় থাকে এবং সাধারণত একটি প্রধান অ্যাকশন নির্দেশ করে। FAB ব্যবহারকারীকে প্রধান কাজগুলো দ্রুত সম্পাদন করতে সহায়তা করে। এটি সাধারণত একটি গোলাকার বাটন এবং বড় আকারে থাকে।

ব্যবহার:

<button mat-fab color="accent">
  <mat-icon>add</mat-icon>
</button>

• mat-fab ডিরেক্টিভ ব্যবহার করা হয়।
• এটি সাধারণত গোলাকার বাটন তৈরি করে এবং একটি আইকন ধারণ করে।
• color="accent" এর মাধ্যমে FAB এর রঙ কাস্টমাইজ করা যায়।

Mini FAB: ছোট আকারের FAB বাটন তৈরি করতে mat-mini-fab ব্যবহার করা হয়।

<button mat-mini-fab>
  <mat-icon>add</mat-icon>
</button>

এটি একটি ছোট আকারের ফ্লোটিং অ্যাকশন বাটন তৈরি করবে।

বাটন কাস্টমাইজেশন

Angular Material এর বাটনগুলোর সাথে বিভিন্ন ধরনের কাস্টমাইজেশন করা যায়। যেমন:

• Color: বাটনের রঙ পরিবর্তন করতে color অ্যাট্রিবিউট ব্যবহার করা হয়। Angular Material তিনটি রঙের বিকল্প প্রদান করে: primary, accent, এবং warn।
• Disabled State: বাটনকে নিষ্ক্রিয় করতে disabled অ্যাট্রিবিউট ব্যবহার করা হয়।

উদাহরণ:

<button mat-raised-button color="primary" [disabled]="isDisabled">Primary Button</button>

এখানে isDisabled একটি ভ্যারিয়েবল যা যদি true হয়, তবে বাটনটি নিষ্ক্রিয় থাকবে।

Angular Material এর বিভিন্ন ধরনের বাটন যেমন Basic, Raised, Icon, এবং Floating Action Button (FAB) আপনার অ্যাপ্লিকেশনে একটি আধুনিক, প্রফেশনাল, এবং ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করতে সহায়তা করে। এগুলো ম্যাটেরিয়াল ডিজাইনের গাইডলাইন অনুসরণ করে, এবং সহজেই কাস্টমাইজ করা যায় আপনার প্রয়োজন অনুযায়ী।

Angular Material একটি শক্তিশালী UI লাইব্রেরি যা আপনাকে প্রি-বিল্ট এবং কাস্টমাইজেবল কম্পোনেন্ট প্রদান করে, যার মধ্যে অন্যতম হলো বাটন (Button)। Angular Material এর বাটন কম্পোনেন্ট ব্যবহার করে আপনি রেসপন্সিভ, আকর্ষণীয় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সক্ষম হবেন। বাটন কম্পোনেন্টটি বিভিন্ন স্টাইল এবং অবস্থা নিয়ে কাজ করতে পারে, যেমন সাধারণ বাটন, রাইজড বাটন, ফ্ল্যাট বাটন, এবং অবস্থা পরিবর্তন।

অ্যাঙ্গুলার ম্যাটেরিয়াল বাটন স্টাইল

Angular Material বাটন কম্পোনেন্টে কিছু পূর্বনির্ধারিত স্টাইল রয়েছে যা আপনার অ্যাপ্লিকেশনের ডিজাইন অনুযায়ী কাস্টমাইজ করা যায়। এর মধ্যে রয়েছে:

• MatButton: সাধারণ বাটন
• MatRaisedButton: রাইজড বাটন
• MatFlatButton: ফ্ল্যাট বাটন
• MatIconButton: আইকন বাটন
• MatButtonToggle: বাটন টগল

১. সাধারণ বাটন (mat-button)

এটি Angular Material এর সবচেয়ে সাধারণ বাটন স্টাইল। এটি একটি সহজ বাটন যা কোনও শ্যাডো বা উত্তোলন ছাড়া সরাসরি প্রদর্শিত হয়।

<button mat-button>Click me</button>

২. রাইজড বাটন (mat-raised-button)

এটি একটি উত্তোলিত বাটন যা শ্যাডো সহ প্রদর্শিত হয়, এবং এটি সাধারণত গুরুত্বপূর্ণ অ্যাকশন বোতাম হিসেবে ব্যবহৃত হয়।

<button mat-raised-button>Click me</button>

৩. ফ্ল্যাট বাটন (mat-flat-button)

ফ্ল্যাট বাটন কোনও শ্যাডো বা উত্তোলন ছাড়া সাধারণ বাটন এর মতো কিন্তু এটিতে ব্যাকগ্রাউন্ড এবং বর্ডার সাধারণত রঙিন থাকে।

<button mat-flat-button>Click me</button>

৪. আইকন বাটন (mat-icon-button)

এটি একটি বাটন যা শুধুমাত্র একটি আইকন প্রদর্শন করে। সাধারণত এই বাটনটি ছোট পরিসরে আইকন ব্যবহার করতে ব্যবহৃত হয়।

<button mat-icon-button>
  <mat-icon>home</mat-icon>
</button>

৫. বাটন টগল (mat-button-toggle)

এটি একটি বিশেষ ধরনের বাটন যা টগল স্টাইলের বোতাম হিসেবে কাজ করে, যেখানে বাটন ক্লিক করলে এটি দুটো অবস্থার মধ্যে পরিবর্তন হতে পারে।

<mat-button-toggle-group>
  <mat-button-toggle value="left">Left</mat-button-toggle>
  <mat-button-toggle value="right">Right</mat-button-toggle>
</mat-button-toggle-group>

বাটন অবস্থা (Button States)

Angular Material বাটন বিভিন্ন অবস্থার জন্য বিভিন্ন স্টাইল সমর্থন করে, যেমন disabled, loading, active ইত্যাদি। এগুলি অ্যাপ্লিকেশনের বিভিন্ন কার্যকারিতার উপর ভিত্তি করে ব্যবহার করা যায়।

১. Disabled বাটন

যদি আপনি কোনও বাটনকে নিষ্ক্রিয় (disabled) করতে চান, তাহলে disabled অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<button mat-raised-button disabled>Disabled Button</button>

২. লোডিং অবস্থা

বাটনের উপর একটি লোডিং ইন্ডিকেটর ব্যবহার করতে পারেন। Angular Material এ MatProgressSpinner ব্যবহার করে লোডিং ইন্ডিকেটর প্রদর্শন করা হয়।

<button mat-raised-button [disabled]="isLoading">
  <mat-spinner *ngIf="isLoading" diameter="20"></mat-spinner>
  Submit
</button>

এখানে isLoading একটি boolean ভেরিয়েবল যা আপনার লোডিং স্টেট নিয়ন্ত্রণ করবে।

৩. Active অবস্থা

বাটনটি অ্যাকটিভ অবস্থা চিহ্নিত করতে, অ্যাপ্লিকেশনে কিছু সিএসএস ক্লাস ব্যবহার করতে পারেন।

<button mat-raised-button [class.active]="isActive">
  Active Button
</button>

এখানে isActive একটি boolean ভেরিয়েবল যা বাটনের অ্যাকটিভ স্টেট নির্ধারণ করবে।

বাটন স্টাইল কাস্টমাইজেশন

Angular Material বাটনের স্টাইল কাস্টমাইজ করা খুব সহজ। আপনি CSS বা SCSS ব্যবহার করে বাটনের আকার, রং, বর্ডার এবং অন্যান্য স্টাইল পরিবর্তন করতে পারেন।

১. বাটনের রঙ কাস্টমাইজ করা

আপনি color অ্যাট্রিবিউট ব্যবহার করে বাটনের রঙ পরিবর্তন করতে পারেন। Angular Material বাটনে তিনটি প্রাথমিক রঙ সাপোর্ট করে: primary, accent, এবং warn।

<button mat-raised-button color="primary">Primary Button</button>
<button mat-raised-button color="accent">Accent Button</button>
<button mat-raised-button color="warn">Warn Button</button>

২. কাস্টম CSS ব্যবহার

আপনি CSS বা SCSS ব্যবহার করে বাটনের স্টাইল কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:

button.mat-raised-button {
  background-color: #ff4081;
  color: white;
}

এটি বাটনের ব্যাকগ্রাউন্ড এবং ফন্ট রঙ পরিবর্তন করবে।

Angular Material বাটন একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজেবল কম্পোনেন্ট, যা আপনার অ্যাপ্লিকেশনের UI ডিজাইনকে আরও আকর্ষণীয় ও ব্যবহারকারী-বান্ধব করতে সহায়ক। এটি বিভিন্ন স্টাইল এবং অবস্থা (যেমন, সাধারণ বাটন, রাইজড বাটন, ফ্ল্যাট বাটন, আইকন বাটন) সমর্থন করে এবং আপনি সহজেই এর ডিজাইন কাস্টমাইজ করতে পারেন। Disabled, loading, এবং active অবস্থার মতো বিভিন্ন বাটন অবস্থা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে।

Angular Material Checkbox হল একটি প্রি-বিল্ট UI কম্পোনেন্ট যা Angular অ্যাপ্লিকেশনের জন্য অত্যন্ত কার্যকরী এবং কাস্টমাইজযোগ্য। এটি ম্যাটেরিয়াল ডিজাইন গাইডলাইন অনুসরণ করে তৈরি করা হয়েছে এবং ব্যবহারকারীদের বিভিন্ন অপশন নির্বাচন করতে সাহায্য করে। অ্যাঙ্গুলার ম্যাটেরিয়াল চেকবক্সটি সাধারণ HTML চেকবক্সের চেয়ে অনেক বেশি স্টাইলিশ এবং ফিচারসমৃদ্ধ, যা ডেভেলপারদের সহজেই আধুনিক ইউআই তৈরি করতে সাহায্য করে।

চেকবক্সের প্রধান বৈশিষ্ট্য

• কাস্টমাইজেবল ডিজাইন: চেকবক্সের রং, আকার এবং অন্যান্য স্টাইল কাস্টমাইজ করা যায়।
• থিমিং: Angular Material থিমিং সিস্টেমের সাথে সামঞ্জস্যপূর্ণ।
• ডেটা বাইন্ডিং: Angular এর ngModel বা Reactive Forms এর মাধ্যমে ডেটা বাইন্ডিং করা যায়।
• ডিসেবল এবং চেকড স্টেট: চেকবক্স ডিফল্টভাবে চেকড বা ডিসেবল করা যায়।

অ্যাঙ্গুলার ম্যাটেরিয়াল চেকবক্স ব্যবহার করা

Angular Material এর চেকবক্স ব্যবহার করতে প্রথমে MatCheckboxModule ইমপোর্ট করতে হবে এবং তারপর HTML ফাইলে এটি ব্যবহার করতে হবে।

ধাপ ১: MatCheckboxModule ইমপোর্ট করা

প্রথমে, আপনার app.module.ts ফাইলে MatCheckboxModule ইমপোর্ট করুন:

import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MatCheckboxModule,  // ইমপোর্ট করুন
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ধাপ ২: HTML ফাইলে চেকবক্স ব্যবহার করা

এখন আপনি HTML ফাইলে চেকবক্স ব্যবহার করতে পারেন। Angular Material এর চেকবক্সের জন্য mat-checkbox ডিরেকটিভ ব্যবহার করা হয়।

সাধারন চেকবক্স:

<mat-checkbox>Agree to terms and conditions</mat-checkbox>

চেকবক্সের সাথে ডেটা বাইন্ডিং:

Angular এর ngModel ব্যবহার করে চেকবক্সের স্টেট ট্র্যাক করতে পারেন (ইউজার যখন চেকবক্স চেক করে তখন ভ্যালু পরিবর্তন হবে)।

<mat-checkbox [(ngModel)]="isChecked">Agree to terms and conditions</mat-checkbox>

এখানে isChecked হল একটি বুলিয়ান ভ্যারিয়েবল যা চেকবক্সের চেকড স্টেট ট্র্যাক করবে।

চেকবক্স ডিসেবল করা:

আপনি চাইলে চেকবক্সটি ডিসেবলও করতে পারেন।

<mat-checkbox [disabled]="true">Agree to terms and conditions</mat-checkbox>

চেকবক্স চেকড স্টেট:

চেকবক্সকে ডিফল্টভাবে চেকড বা আনচেকড অবস্থায় থাকতে সেট করা যায়।

<mat-checkbox [checked]="true">Agree to terms and conditions</mat-checkbox>

ধাপ ৩: স্টাইল কাস্টমাইজেশন

আপনি Angular Material এর চেকবক্সের স্টাইল কাস্টমাইজ করতে পারেন। এটি CSS বা SCSS এর মাধ্যমে করা যায়। কিছু উদাহরণ নিচে দেওয়া হলো:

রঙ পরিবর্তন:

.mat-checkbox-checked .mat-checkbox-background {
  background-color: #4CAF50;  /* চেকড রঙ পরিবর্তন */
}

সাইজ পরিবর্তন:

mat-checkbox {
  transform: scale(1.5); /* চেকবক্স সাইজ বড় করা */
}

ধাপ ৪: Reactive Forms এর সাথে চেকবক্স ব্যবহার করা

Angular Reactive Forms ব্যবহার করে চেকবক্সের মান ট্র্যাক করা যায়। প্রথমে ReactiveFormsModule ইমপোর্ট করতে হবে এবং তারপর Reactive Form ব্যবহার করা যেতে পারে।

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule, // ইমপোর্ট করুন
    MatCheckboxModule
  ],
})
export class AppModule { }

এখন চেকবক্সের মান ট্র্যাক করতে FormGroup এবং FormControl ব্যবহার করা যেতে পারে:

import { FormGroup, FormControl } from '@angular/forms';

export class AppComponent {
  checkboxForm = new FormGroup({
    agreeToTerms: new FormControl(false)
  });
}

এটি HTML এ এভাবে ব্যবহার করা হবে:

<form [formGroup]="checkboxForm">
  <mat-checkbox formControlName="agreeToTerms">Agree to terms and conditions</mat-checkbox>
</form>

চেকবক্সের অন্যান্য বৈশিষ্ট্য

• Multi-Select: একাধিক চেকবক্স নির্বাচন করার জন্য, একাধিক চেকবক্স একসাথে ব্যবহার করা যায়।
• Indeterminate State: চেকবক্সে indeterminate স্টেট ব্যবহার করা যেতে পারে, যা চেকবক্সে অস্বীকৃত মান নির্দেশ করে (যেমন, কিছু অপশন চেক করা, কিছু অপশন চেক করা হয়নি)।

<mat-checkbox [indeterminate]="true">Some options</mat-checkbox>

Angular Material এর চেকবক্স একটি অত্যন্ত কাস্টমাইজযোগ্য এবং ব্যবহারকারী বান্ধব কম্পোনেন্ট, যা Angular অ্যাপ্লিকেশনগুলিতে দ্রুত এবং আধুনিক ইউআই তৈরি করতে সাহায্য করে। এটি বিভিন্ন ফিচারের সাথে আসে, যেমন চেকড, ডিসেবল, এবং ইনডিটারমিনেট স্টেট, এবং সহজেই ডেটা বাইন্ডিং এবং স্টাইল কাস্টমাইজেশন সাপোর্ট করে।

Angular Material এর মাধ্যমে আপনি সহজে সুন্দর এবং কাস্টমাইজযোগ্য UI কম্পোনেন্ট তৈরি করতে পারেন। এর মধ্যে একটি জনপ্রিয় কম্পোনেন্ট হলো চেকবক্স (Checkbox)। Angular Material এর MatCheckbox কম্পোনেন্ট ব্যবহার করে আপনি চেকবক্স তৈরি করতে পারেন যা দেখতে আধুনিক এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

বেসিক চেকবক্স ব্যবহার

১. Angular Material ইনস্টল করা

প্রথমে, Angular Material ইনস্টল করতে হবে। যদি আপনি এটি আগে ইনস্টল না করে থাকেন, তবে নিচের কমান্ডটি ব্যবহার করুন:

ng add @angular/material

এটি Angular Material, Angular CDK, এবং Angular Animations ইন্সটল করবে।

২. প্রয়োজনীয় মডিউল ইমপোর্ট করা

চেকবক্স ব্যবহারের জন্য MatCheckboxModule ইমপোর্ট করতে হবে। app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  declarations: [AppComponent],
  imports: [
    MatCheckboxModule,  // MatCheckboxModule ইমপোর্ট করা হয়েছে
    // অন্যান্য মডিউলস
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

৩. HTML ফাইলে বেসিক চেকবক্স তৈরি

এখন আপনি MatCheckbox কম্পোনেন্ট ব্যবহার করে চেকবক্স তৈরি করতে পারেন। নিচে একটি বেসিক চেকবক্সের উদাহরণ দেওয়া হলো:

<mat-checkbox>Accept Terms and Conditions</mat-checkbox>

এটি একটি বেসিক চেকবক্স তৈরি করবে, যেখানে ব্যবহারকারী চেকবক্সে টিক মার্ক দিতে পারবেন।

৪. চেকবক্সের মান (Checked Value) গ্রহণ করা

চেকবক্সের মান (যদি চেকবক্সটি চেক করা হয় বা না হয়) সংগ্রহ করতে আপনি ngModel ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

<mat-checkbox [(ngModel)]="isChecked">Accept Terms and Conditions</mat-checkbox>

এখানে, isChecked একটি বুলিয়ান ভেরিয়েবল, যা চেকবক্সটি চেক বা আনচেক হলে আপডেট হবে। এটি টাইপ করা ভেরিয়েবলটির মানের উপর নির্ভর করবে।

export class AppComponent {
  isChecked = false;  // ডিফল্টভাবে চেকবক্সটি আনচেক করা
}

৫. চেকবক্সের স্টাইলিং কাস্টমাইজ করা

Angular Material এর মাধ্যমে আপনি চেকবক্সের স্টাইলও কাস্টমাইজ করতে পারেন। যেমন আপনি চেকবক্সের রঙ পরিবর্তন করতে পারেন:

<mat-checkbox color="primary">Accept Terms and Conditions</mat-checkbox>
<mat-checkbox color="accent">Receive Newsletter</mat-checkbox>
<mat-checkbox color="warn">Delete Account</mat-checkbox>

এখানে primary, accent, এবং warn রঙ ব্যবহার করা হয়েছে। Angular Material এর রঙ থিমের মাধ্যমে আপনি এই রঙ পরিবর্তন করতে পারেন।

৬. চেকবক্সের ডিসেবল স্টেট

আপনি চেকবক্সকে ডিসেবল (অচল) করতে চাইলে, disabled অ্যাট্রিবিউট ব্যবহার করতে পারেন:

<mat-checkbox disabled>Disabled Checkbox</mat-checkbox>

এটি চেকবক্সটি ডিসেবল করে দিবে, এবং ব্যবহারকারী এটি চেক বা আনচেক করতে পারবেন না।

Angular Material এর MatCheckbox কম্পোনেন্ট খুবই সহজে ব্যবহারযোগ্য এবং এটি অ্যাপ্লিকেশনে আধুনিক, সুন্দর এবং কার্যকরী চেকবক্স তৈরি করতে সহায়ক। আপনি এই কম্পোনেন্টের মাধ্যমে বিভিন্ন কাস্টমাইজেশন যেমন স্টাইল, রঙ, ডেটা বাইন্ডিং, এবং ডিসেবল স্টেট ইত্যাদি করতে পারেন। Angular Material আপনাকে সঠিকভাবে স্টাইল করা এবং ফাংশনাল চেকবক্স তৈরির জন্য প্রয়োজনীয় সমস্ত বৈশিষ্ট্য প্রদান করে।

Angular Material এর মাধ্যমে চেকবক্স গ্রুপিং (Checkbox Grouping) করা একটি সাধারণ প্রক্রিয়া, যেখানে একাধিক চেকবক্সকে একটি নির্দিষ্ট গ্রুপে রাখা হয় এবং ব্যবহারকারী তাদের মধ্যে এক বা একাধিক চেকবক্স নির্বাচন করতে পারেন। Angular Material এর <mat-checkbox> কম্পোনেন্টের মাধ্যমে চেকবক্স তৈরি করা যায় এবং ngModel বা FormControl ব্যবহার করে তাদের ভ্যালু এবং স্টেট (যেমন, চেক করা বা না চেক করা) পরিচালনা করা যায়।

চেকবক্স গ্রুপিং ব্যবহার করার ক্ষেত্রে, আপনি একাধিক চেকবক্সকে একটি FormGroup এর মধ্যে যুক্ত করতে পারেন। এটি বিশেষভাবে উপকারী যখন আপনি একাধিক চেকবক্সের মান সংগ্রহ করতে চান এবং সমস্ত চেকবক্সের মান একটি নির্দিষ্ট ডাটা মডেলে স্টোর করতে চান।

চেকবক্স গ্রুপিং তৈরি করা

নিচে চেকবক্স গ্রুপিং করার একটি উদাহরণ দেওয়া হলো:

১. অ্যাঙ্গুলার ম্যাটেরিয়াল চেকবক্স ইনপুট ব্যবহার করা

প্রথমে MatCheckboxModule আপনার মডিউলে ইমপোর্ট করতে হবে।

import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  imports: [MatCheckboxModule]
})
export class AppModule { }

২. চেকবক্স গ্রুপিং HTML টেমপ্লেট

<form [formGroup]="checkboxGroup">
  <mat-checkbox formControlName="option1">Option 1</mat-checkbox>
  <mat-checkbox formControlName="option2">Option 2</mat-checkbox>
  <mat-checkbox formControlName="option3">Option 3</mat-checkbox>
</form>

এখানে আমরা একটি FormGroup ব্যবহার করেছি, যেখানে তিনটি চেকবক্স গ্রুপ করা হয়েছে।

৩. চেকবক্স গ্রুপিং এর জন্য টাইপস্ক্রিপ্ট কোড

প্রথমে আপনার checkboxGroup নামে একটি FormGroup তৈরি করতে হবে। FormControl এর মাধ্যমে প্রতিটি চেকবক্সের মান নিয়ন্ত্রণ করা হবে।

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-checkbox-group',
  templateUrl: './checkbox-group.component.html',
  styleUrls: ['./checkbox-group.component.css']
})
export class CheckboxGroupComponent implements OnInit {

  checkboxGroup: FormGroup;

  ngOnInit() {
    this.checkboxGroup = new FormGroup({
      option1: new FormControl(false),
      option2: new FormControl(false),
      option3: new FormControl(false)
    });
  }

  submit() {
    console.log(this.checkboxGroup.value);
  }
}

এখানে, FormGroup-এ তিনটি FormControl যুক্ত করা হয়েছে, যার প্রতিটির মান false (অর্থাৎ ডিফল্টভাবে চেক করা হয়নি)।

৪. চেকবক্স স্টাইলিং

Angular Material চেকবক্সের জন্য ডিফল্ট স্টাইলিং প্রদান করে, তবে আপনি চাইলে CSS ব্যবহার করে এটি কাস্টমাইজ করতে পারেন:

mat-checkbox {
  margin: 5px;
}

এটি চেকবক্সের মধ্যে স্পেস যোগ করবে।

চেকবক্স গ্রুপিং এর সুবিধা

• ডাটা সংগ্রহ সহজ: একটি গ্রুপে একাধিক চেকবক্স থাকলে, তাদের মান একটি নির্দিষ্ট অবজেক্টে সংগৃহীত হয়, যা ফর্ম সাবমিটের সময় সহজেই ব্যবহার করা যায়।
• ডাইনামিক: ব্যবহারকারীরা একাধিক অপশন সিলেক্ট করতে পারে, যা ডাটা সংগ্রহের ক্ষেত্রে কার্যকর।
• ফর্ম কন্ট্রোল: ngModel বা FormControl ব্যবহার করে চেকবক্সের মান সহজে নিয়ন্ত্রণ করা যায়।
• উন্নত UX/UI: Angular Material এর মাধ্যমে সুন্দর এবং ইন্টারঅ্যাক্টিভ চেকবক্স তৈরি করা সম্ভব।

Angular Material এর মাধ্যমে চেকবক্স গ্রুপিং করা একটি কার্যকর উপায়, যা ব্যবহারকারীদের একাধিক অপশন নির্বাচন করতে সহায়তা করে। FormGroup এবং FormControl ব্যবহার করে আপনি চেকবক্সের মান সংগ্রহ ও পরিচালনা করতে পারেন, এবং Angular Material এর ডিফল্ট স্টাইলিং এর মাধ্যমে একটি আধুনিক UI ডিজাইন করতে পারবেন।

Angular Material এ রেডিও বাটন (Radio Button) একটি জনপ্রিয় এবং ব্যবহারযোগ্য কম্পোনেন্ট, যা ব্যবহারকারীদের একটি নির্দিষ্ট অপশন নির্বাচন করার সুযোগ দেয়। রেডিও বাটন সাধারণত এমন পরিস্থিতিতে ব্যবহার করা হয় যেখানে একাধিক বিকল্পের মধ্যে থেকে একটিই নির্বাচন করতে হয়।

Angular Material এর MatRadioButton কম্পোনেন্টটি ব্যবহার করে রেডিও বাটন সহজেই তৈরি করা যায়। এটি Material Design গাইডলাইন অনুসরণ করে, যা অ্যাপ্লিকেশনগুলিতে আধুনিক এবং সুন্দর UI প্রদান করে।

রেডিও বাটন তৈরি করার ধাপ

১. Angular Material ইন্সটল করা

যদি Angular Material ইতিমধ্যেই ইন্সটল না করা থাকে, তাহলে প্রথমে এটি ইন্সটল করুন:

ng add @angular/material

২. প্রয়োজনীয় মডিউল ইমপোর্ট করা

রেডিও বাটন ব্যবহার করতে MatRadioModule মডিউলটি আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে:

import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  imports: [
    MatRadioModule
  ]
})
export class AppModule { }

৩. রেডিও বাটন HTML কোড

এখন MatRadioButton কম্পোনেন্ট ব্যবহার করে রেডিও বাটন তৈরি করা যায়। এখানে একটি সাধারণ উদাহরণ দেয়া হলো:

<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

উপরের কোডে, আমরা mat-radio-group ব্যবহার করেছি, যা রেডিও বাটনগুলোর একটি গ্রুপ তৈরি করে এবং ব্যবহারকারীর একটিই নির্বাচন করার অনুমতি দেয়।

৪. নির্বাচিত মান সংরক্ষণ করা

Angular এর ngModel ব্যবহার করে আপনি নির্বাচিত মানটি একটি ভেরিয়েবলে সংরক্ষণ করতে পারেন।

<mat-radio-group [(ngModel)]="selectedOption" aria-label="Select an option">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

<p>You selected: {{ selectedOption }}</p>

এখানে, selectedOption ভেরিয়েবলটি রেডিও বাটনের নির্বাচিত মান ধারণ করে।

৫. রেডিও বাটন গ্রুপে ডিফল্ট মান সেট করা

আপনি ngModel এর মাধ্যমে রেডিও বাটন গ্রুপে ডিফল্ট মানও সেট করতে পারেন:

export class AppComponent {
  selectedOption: string = 'option2'; // ডিফল্ট নির্বাচিত অপশন
}

এখন, option2 ডিফল্ট হিসেবে নির্বাচিত থাকবে যখন পেজ লোড হবে।

রেডিও বাটন কাস্টমাইজেশন

Angular Material এর রেডিও বাটন বেশ কিছু কাস্টমাইজেশন অপশন সরবরাহ করে, যা আপনাকে বাটনের স্টাইল ও আউটপুট কন্ট্রোল করতে সহায়তা করবে।

১. রেডিও বাটনের স্টাইল পরিবর্তন

Angular Material এর রেডিও বাটনগুলো সাধারণত Material Design গাইডলাইন অনুসরণ করে, তবে আপনি চাইলে এটি কাস্টম স্টাইলও করতে পারেন।

mat-radio-button {
  color: #ff5722;  /* বাটনের রং পরিবর্তন */
}

২. রেডিও বাটনটি নিষ্ক্রিয় (Disabled) করা

রেডিও বাটনকে নিষ্ক্রিয় করতে disabled অ্যাট্রিবিউট ব্যবহার করা হয়:

<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="option1" disabled>Option 1 (Disabled)</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
</mat-radio-group>

৩. রেডিও বাটনটিতে চেকবক্স স্টাইল দেয়া

Angular Material এর রেডিও বাটনে MatRadioButton এর জন্য আপনি চেকবক্সের মতো স্টাইলও কাস্টমাইজ করতে পারেন।

<mat-radio-group aria-label="Select an option" [color]="selectedOption === 'option1' ? 'primary' : 'accent'">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
</mat-radio-group>

এখানে color প্রপার্টি ব্যবহার করে রেডিও বাটনের রঙ পরিবর্তন করা হয়েছে, যা নির্বাচিত অপশনের উপর ভিত্তি করে রঙ পরিবর্তিত হবে।

Angular Material রেডিও বাটন (MatRadioButton) কম্পোনেন্ট অ্যাঙ্গুলার অ্যাপ্লিকেশনগুলির জন্য একটি শক্তিশালী এবং সহজে ব্যবহারযোগ্য উপাদান। এটি Material Design অনুসরণ করে একটি আধুনিক ও সুন্দর UI তৈরি করতে সাহায্য করে এবং mat-radio-group ব্যবহার করে একাধিক অপশনের মধ্যে থেকে একটি নির্বাচন করা যায়। আপনি ngModel ব্যবহার করে নির্বাচিত মান সংগ্রহ করতে পারেন এবং থিম বা কাস্টম স্টাইলিংয়ের মাধ্যমে রেডিও বাটনকে আপনার অ্যাপ্লিকেশনের ডিজাইনের সাথে মানানসই করতে পারেন।

Angular Material এর MatRadioButton একটি অত্যন্ত জনপ্রিয় এবং ব্যবহারযোগ্য রেডিও বাটন কম্পোনেন্ট। এটি Material Design-এর গাইডলাইন অনুসরণ করে তৈরি করা হয়েছে এবং ডেভেলপারদের জন্য বিভিন্ন কাস্টমাইজেশন অপশন প্রদান করে। রেডিও বাটন ব্যবহারকারীদের মধ্যে থেকে একটি নির্দিষ্ট বিকল্প নির্বাচন করতে সহায়ক।

Angular Material এর MatRadioButton কম্পোনেন্টের সাহায্যে আপনি সহজেই সুন্দর এবং আধুনিক রেডিও বাটন তৈরি করতে পারেন।

রেডিও বাটন ইন্সটল এবং সেটআপ

প্রথমে Angular Material ইন্সটল করা থাকতে হবে। যদি এটি এখনও ইন্সটল না করে থাকেন, তবে নিম্নলিখিত কমান্ডটি ব্যবহার করে Angular Material ইন্সটল করুন:

ng add @angular/material

এছাড়া, MatRadioModule ব্যবহার করতে হবে, যা রেডিও বাটনের কম্পোনেন্ট সরবরাহ করে। MatRadioModule আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  imports: [
    MatRadioModule
  ]
})
export class AppModule { }

রেডিও বাটন ব্যবহার করা

এখন আপনি MatRadioButton কম্পোনেন্ট ব্যবহার করে HTML ফাইলে রেডিও বাটন তৈরি করতে পারবেন। নিচে একটি উদাহরণ দেওয়া হলো:

১. HTML এ রেডিও বাটন ব্যবহার

<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে, <mat-radio-group> ট্যাগটি রেডিও বাটনের গ্রুপ তৈরি করবে, এবং প্রতিটি <mat-radio-button> একটি পৃথক রেডিও বাটন তৈরি করবে। গ্রুপের মধ্যে শুধুমাত্র একটি বাটন নির্বাচন করা সম্ভব হবে, কারণ রেডিও বাটনগুলি একে অপরকে এক্সক্লুসিভলি নির্বাচন করতে সাহায্য করে।

২. টাইপস্ক্রিপ্টে সিলেক্টেড ভ্যালু বাউন্ড করা

আপনি যদি রেডিও বাটনের সিলেক্টেড ভ্যালুকে টাইপস্ক্রিপ্টে ব্যবহার করতে চান, তবে [(ngModel)] ব্যবহার করে রেডিও বাটনের মান বাউন্ড করতে পারেন।

<mat-radio-group [(ngModel)]="selectedOption" aria-label="Select an option">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে, selectedOption একটি টাইপস্ক্রিপ্ট ভ্যারিয়েবল যা সিলেক্ট করা অপশনটি ধারণ করবে।

৩. টাইপস্ক্রিপ্ট কোড

import { Component } from '@angular/core';

@Component({
  selector: 'app-radio-button',
  templateUrl: './radio-button.component.html',
})
export class RadioButtonComponent {
  selectedOption: string = 'option1';  // ডিফল্ট সিলেক্টেড অপশন
}

এখানে, selectedOption হল ডিফল্ট মান, এবং ব্যবহারকারী যদি অন্য কোনো অপশন নির্বাচন করে, তা পরিবর্তিত হবে।

কাস্টমাইজেশন অপশন

১. ডিফল্ট সিলেক্ট করা অপশন

আপনি সহজেই একটি ডিফল্ট রেডিও বাটন সিলেক্ট করতে পারেন। যেমন:

<mat-radio-group [(ngModel)]="selectedOption" aria-label="Select an option">
  <mat-radio-button value="option1" checked>Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে, checked অ্যাট্রিবিউট ব্যবহার করে আপনি প্রথম রেডিও বাটনটি ডিফল্ট হিসেবে সিলেক্ট করতে পারেন।

২. রেডিও বাটন ডিসেবল করা

আপনি রেডিও বাটনটি ডিসেবল (অক্ষম) করতে চাইলে disabled অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<mat-radio-group [(ngModel)]="selectedOption" aria-label="Select an option">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2" disabled>Option 2 (Disabled)</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে, "Option 2" রেডিও বাটনটি ডিসেবল করা হয়েছে, যা ব্যবহারকারী নির্বাচন করতে পারবেন না।

৩. রেডিও বাটন স্টাইল কাস্টমাইজেশন

আপনি CSS ব্যবহার করে রেডিও বাটনের স্টাইলও কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:

mat-radio-button {
  font-size: 16px;
  color: #6200ea;
}

এটি রেডিও বাটনের ফন্ট সাইজ এবং রঙ পরিবর্তন করবে।

Angular Material এর MatRadioButton কম্পোনেন্ট খুবই সহজ এবং ব্যবহারযোগ্য, যা অ্যাপ্লিকেশনগুলিতে একটি সুন্দর এবং আধুনিক রেডিও বাটন তৈরি করতে সাহায্য করে। আপনি [(ngModel)] ব্যবহার করে সিলেক্ট করা অপশন টাইপস্ক্রিপ্টে বাউন্ড করতে পারেন এবং রেডিও বাটনগুলির কাস্টমাইজেশন অপশন ব্যবহার করে আপনার UI কে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করতে পারেন।

Angular Material এ রেডিও বাটন একটি জনপ্রিয় ইনপুট কম্পোনেন্ট, যা ব্যবহারকারীদের একটি নির্দিষ্ট বিকল্প নির্বাচন করতে সাহায্য করে। mat-radio-button কম্পোনেন্ট ব্যবহার করে অ্যাঙ্গুলার অ্যাপ্লিকেশনে রেডিও বাটন তৈরি করা যায়। গ্রুপ করা রেডিও বাটন ব্যবহারকারীদের জন্য অনেকটা একটি নির্দিষ্ট সেট থেকে একটি অপশন নির্বাচন করার সুবিধা দেয়।

অ্যাঙ্গুলার ম্যাটেরিয়াল এর মাধ্যমে রেডিও বাটনগুলো গ্রুপ করা খুবই সহজ এবং এটি mat-radio-group এর মাধ্যমে করা হয়। এই গ্রুপের মধ্যে একাধিক রেডিও বাটন থাকতে পারে, তবে ব্যবহারকারী একসাথে একটির বেশি রেডিও বাটন সিলেক্ট করতে পারবে না।

রেডিও বাটন গ্রুপ করার জন্য প্রয়োজনীয় পদক্ষেপ

১. Angular Material এর রেডিও বাটন মডিউল ইমপোর্ট করা

প্রথমে, আপনাকে MatRadioModule মডিউলটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করা যায়।

import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  imports: [
    MatRadioModule
  ]
})
export class AppModule { }

২. HTML এ রেডিও বাটন গ্রুপ তৈরি করা

mat-radio-group কম্পোনেন্ট ব্যবহার করে রেডিও বাটনগুলো গ্রুপ করা হয়। এর মধ্যে বিভিন্ন mat-radio-button উপাদান থাকবে এবং একবারে একটি রেডিও বাটন সিলেক্ট করা যাবে।

<mat-radio-group aria-label="Select an option" [(ngModel)]="selectedValue">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে ngModel ব্যবহার করা হয়েছে, যা ব্যবহারকারী যে অপশনটি সিলেক্ট করবে, তার মান ধরে রাখে। এই ভ্যালুটা selectedValue নামে একটি প্রপার্টি হয়ে থাকবে, যা TypeScript ফাইলে ডিফাইন করা হবে।

৩. টাইপস্ক্রিপ্ট ফাইলে ডেটা মডেল তৈরি করা

এখন, TypeScript ফাইলে selectedValue ডিফাইন করুন যা আপনার সিলেক্ট করা রেডিও বাটনের মান ধারণ করবে।

import { Component } from '@angular/core';

@Component({
  selector: 'app-radio-button-example',
  templateUrl: './radio-button-example.component.html',
  styleUrls: ['./radio-button-example.component.css']
})
export class RadioButtonExampleComponent {
  selectedValue: string = 'option1';  // ডিফল্ট মান
}

এখন, selectedValue প্রপার্টি mat-radio-group এর মধ্যে সিলেক্ট করা অপশনের মান ধারণ করবে।

৪. রেডিও বাটন গ্রুপ স্টাইলিং (ঐচ্ছিক)

আপনি চাইলে CSS ব্যবহার করে রেডিও বাটনের স্টাইল কাস্টমাইজ করতে পারেন। এটি অ্যাপ্লিকেশনের ডিজাইন উন্নত করতে সাহায্য করবে।

mat-radio-button {
  margin-bottom: 10px;
}

রেডিও বাটন গ্রুপের অতিরিক্ত বৈশিষ্ট্য

• disabled: আপনি রেডিও বাটনগুলো ডিজেবল করতে পারেন, যাতে ব্যবহারকারী সেগুলো নির্বাচন করতে না পারে।

<mat-radio-group aria-label="Select an option" [(ngModel)]="selectedValue">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2" disabled>Option 2</mat-radio-button>
</mat-radio-group>

• name: একাধিক রেডিও বাটনের জন্য একে অপরকে গ্রুপ করার জন্য name অ্যাট্রিবিউট ব্যবহার করা যেতে পারে। এটি শুধুমাত্র একবারে একটি বিকল্প নির্বাচন করতে সহায়ক হবে।

<mat-radio-group name="group1" [(ngModel)]="selectedValue">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
</mat-radio-group>

• aria-label: অ্যাক্সেসিবিলিটি সুনিশ্চিত করতে aria-label ব্যবহার করতে পারেন, যাতে স্ক্রীন রিডার ব্যবহারকারীরা বুঝতে পারেন যে এটি একটি রেডিও বাটন গ্রুপ।

<mat-radio-group aria-label="Choose a color" [(ngModel)]="selectedColor">
  <mat-radio-button value="red">Red</mat-radio-button>
  <mat-radio-button value="green">Green</mat-radio-button>
  <mat-radio-button value="blue">Blue</mat-radio-button>
</mat-radio-group>

Angular Material এর রেডিও বাটন গ্রুপ ব্যবহার করা খুবই সহজ এবং এটি আপনাকে ইউজারের কাছ থেকে একটি নির্দিষ্ট পছন্দ নেওয়ার জন্য একটি সহজ উপায় দেয়। mat-radio-group এবং mat-radio-button কম্পোনেন্টের মাধ্যমে আপনি একাধিক রেডিও বাটনকে গ্রুপ করে একটি সেট থেকে একমাত্র একটি অপশন নির্বাচন করতে পারবেন। Angular এর ngModel ডিরেকটিভ ব্যবহার করে আপনি এই নির্বাচিত মানটি অ্যাপ্লিকেশনে ধারণ করতে পারবেন, যা অ্যাপ্লিকেশনের বিভিন্ন অংশে ব্যবহার করা যাবে।

Angular Material Select কম্পোনেন্ট একটি ড্রপডাউন সিলেক্ট মেনু যা ব্যবহারকারীদের নির্দিষ্ট অপশন থেকে একটি মান নির্বাচন করতে দেয়। এটি Material Design এর একটি অংশ এবং এটি MatSelect কম্পোনেন্টের মাধ্যমে তৈরি করা হয়। MatSelect একটি ফ্লেক্সিবল সিলেক্ট কম্পোনেন্ট যা বিভিন্ন অপশন প্রদর্শন করতে পারে এবং তা সহজেই কাস্টমাইজ করা যায়।

MatSelect কম্পোনেন্টের ব্যবহার

MatSelect কম্পোনেন্ট সাধারণত ব্যবহারকারীর জন্য একটি তালিকা বা ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়, যেখানে তারা এক বা একাধিক অপশন সিলেক্ট করতে পারে। এটি একটি উন্নত সিলেক্ট UI প্রদান করে, যা ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব হয়।

MatSelect এর বেসিক উদাহরণ

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(value)]="selectedOption">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

এখানে, MatSelect কম্পোনেন্টের মধ্যে mat-option কম্পোনেন্ট ব্যবহৃত হয়েছে, যার মাধ্যমে বিভিন্ন অপশন যোগ করা হয়েছে। ব্যবহারকারী যেকোনো একটি অপশন নির্বাচন করতে পারে, এবং তার মান selectedOption ভেরিয়েবলে সংরক্ষিত হবে।

MatSelect এর বিভিন্ন কনফিগারেশন

১. Multiselect (একাধিক অপশন নির্বাচন)

যদি আপনি ব্যবহারকারীদের একাধিক অপশন নির্বাচন করার সুযোগ দিতে চান, তাহলে multiple অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Choose options</mat-label>
  <mat-select [(value)]="selectedOptions" multiple>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

এখানে, multiple অ্যাট্রিবিউট যোগ করার মাধ্যমে ব্যবহারকারী একাধিক অপশন সিলেক্ট করতে পারবে। নির্বাচিত মানগুলি selectedOptions ভেরিয়েবলে সংরক্ষিত হবে।

২. ডিফল্ট মান নির্বাচন

আপনি ডিফল্ট মান নির্বাচন করতে ngModel বা [(value)] ব্যবহার করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(value)]="selectedOption">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

এখানে, selectedOption ভেরিয়েবলে আপনি একটি ডিফল্ট মান সেট করে দিতে পারেন, যেমন:

export class MyComponent {
  selectedOption = 'option2'; // Default selection
}

৩. ডিসেবল অপশন

আপনি যদি কোনও অপশনকে নিষ্ক্রিয় করতে চান, তাহলে disabled অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(value)]="selectedOption">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2" disabled>Option 2 (Disabled)</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

এখানে, Option 2 নিষ্ক্রিয় করা হয়েছে এবং এটি ব্যবহারকারী সিলেক্ট করতে পারবে না।

৪. সার্চেবল সিলেক্ট (Searchable Select)

আপনি MatSelect কে সার্চযোগ্য করতে চাইলে, Angular Material এর সাথে mat-autocomplete ব্যবহার করতে পারেন। এর মাধ্যমে ব্যবহারকারী একটি ইনপুট ফিল্ডে টাইপ করে দ্রুত একটি অপশন খুঁজে পেতে পারে।

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(value)]="selectedOption">
    <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
  </mat-select>
</mat-form-field>

এখানে, options একটি অ্যারে হবে যা আপনার অপশনগুলো ধারণ করবে। এই অ্যারে থেকে ডাইনামিকভাবে অপশনগুলি তৈরি করা হবে।

MatSelect কাস্টমাইজেশন

১. ড্রপডাউন সিলেক্ট এর স্টাইলিং

MatSelect এবং mat-option কম্পোনেন্টের স্টাইল কাস্টমাইজ করা যায় CSS বা SCSS ব্যবহার করে। উদাহরণস্বরূপ:

.mat-select-trigger {
  color: #FF5733;
}

.mat-option:hover {
  background-color: #e0f7fa;
}

২. এন্টার/ট্যাব কী সাপোর্ট

Angular Material সিলেক্ট কম্পোনেন্ট ইতিমধ্যেই এন্টার/ট্যাব কী সাপোর্ট করে, কিন্তু আপনি যদি এটি কাস্টমাইজ করতে চান, তাহলে কীবোর্ড ইভেন্ট হ্যান্ডলার ব্যবহার করতে পারেন।

<mat-select (keydown.enter)="onSelect()" [(value)]="selectedOption">
  <mat-option value="option1">Option 1</mat-option>
  <mat-option value="option2">Option 2</mat-option>
</mat-select>

এখানে, keydown.enter ইভেন্টের মাধ্যমে আপনি বিশেষ কোনো অ্যাকশন ট্রিগার করতে পারেন।

Angular Material এর MatSelect কম্পোনেন্ট একটি শক্তিশালী এবং ব্যবহারকারী-বান্ধব সিলেক্ট মেনু তৈরি করতে সাহায্য করে, যা Material Design অনুসরণ করে। এটি বিভিন্ন কনফিগারেশন এবং কাস্টমাইজেশন অপশন প্রদান করে, যেমন একাধিক অপশন সিলেকশন, ডিসেবল অপশন, ডিফল্ট মান এবং সার্চ ফিচার। Angular Material সিলেক্ট কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজেই একটি উন্নত এবং রেসপন্সিভ ড্রপডাউন মেনু তৈরি করতে পারবেন যা আপনার অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতা উন্নত করবে।

Angular Material Select কম্পোনেন্টটি একটি ড্রপডাউন সিলেক্ট লিস্ট তৈরির জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীদের কাছে একটি পরিষ্কার এবং স্বচ্ছল ইন্টারফেসে বিভিন্ন অপশন সিলেক্ট করার সুযোগ দেয়। Angular Material Select কম্পোনেন্টটি সাধারণ HTML সিলেক্ট ট্যাগের মতো কাজ করে তবে এটি আরও আধুনিক এবং উন্নত ডিজাইন ও ফিচার সরবরাহ করে, যেমন ইমেজ সহ অপশন, মাল্টিপল সিলেকশন, এবং কাস্টমাইজড লেবেল ইত্যাদি।

Material Select এর সুবিধা

• ব্যবহারকারীর অভিজ্ঞতা উন্নত করা: Angular Material Select সিলেক্ট লিস্টের ডিজাইন উন্নত করে, যা অধিক কার্যকর এবং সুন্দর।
• রেসপন্সিভ ডিজাইন: এটি সমস্ত ধরনের ডিভাইসের জন্য উপযোগী।
• সহজ কাস্টমাইজেশন: আপনি লেবেল, অপশন, আউটপুট ইভেন্ট এবং আরও অনেক কিছু কাস্টমাইজ করতে পারবেন।
• অ্যাক্সেসিবিলিটি: Angular Material Select অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ড মেনে চলে, যা স্ক্রিন রিডার এবং কীবোর্ড নেভিগেশনের জন্য উপযুক্ত।

Material Select ব্যবহার করার ধাপসমূহ

১. Angular Material এর Select মডিউল ইমপোর্ট করা

প্রথমে, MatSelectModule মডিউলটি app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatSelectModule } from '@angular/material/select';

@NgModule({
  imports: [
    MatSelectModule
  ]
})
export class AppModule { }

২. HTML এ Material Select ব্যবহার করা

এখন, আপনার HTML ফাইলে mat-select ট্যাগ ব্যবহার করে সিলেক্ট ড্রপডাউন তৈরি করতে হবে। এর মধ্যে mat-option ট্যাগ ব্যবহার করে অপশনগুলো নির্ধারণ করতে হবে।

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

• mat-form-field: এটি একটি Angular Material ফর্ম ফিল্ড, যা সিলেক্টের লেবেল এবং আউটপুট স্টাইল কাস্টমাইজ করতে সাহায্য করে।
• mat-label: সিলেক্ট ফিল্ডের লেবেল হিসেবে কাজ করে।
• mat-select: এটি মূল সিলেক্ট কম্পোনেন্ট।
• mat-option: সিলেক্ট অপশনগুলো নির্ধারণ করতে ব্যবহৃত হয়।

৩. Angular Form এ Material Select ব্যবহার করা

যদি আপনি Angular Reactive Forms বা Template-driven Forms ব্যবহার করতে চান, তবে FormControl ব্যবহার করতে হবে।

Reactive Forms ব্যবহার করে:

import { FormControl } from '@angular/forms';

export class AppComponent {
  selectedOption = new FormControl('');
}

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [formControl]="selectedOption">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

Template-driven Forms ব্যবহার করে:

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(ngModel)]="selectedOption">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

৪. সিলেক্ট অপশন ডাইনামিকভাবে লোড করা

Angular Material Select এ আপনি ডাইনামিক অপশনও যোগ করতে পারেন। উদাহরণস্বরূপ, আপনি একটি লিস্ট বা অ্যারে থেকে অপশনগুলো লোড করতে পারেন।

export class AppComponent {
  options = ['Option 1', 'Option 2', 'Option 3'];
}

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(ngModel)]="selectedOption">
    <mat-option *ngFor="let option of options" [value]="option">{{ option }}</mat-option>
  </mat-select>
</mat-form-field>

৫. Multiple Selection (একাধিক অপশন সিলেকশন)

Material Select কম্পোনেন্টটি একাধিক অপশন সিলেক্ট করতে সমর্থন করে। এর জন্য multiple অ্যাট্রিবিউট ব্যবহার করতে হয়।

<mat-form-field appearance="fill">
  <mat-label>Choose options</mat-label>
  <mat-select multiple [(ngModel)]="selectedOptions">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

• multiple: একাধিক অপশন সিলেক্ট করার জন্য।

৬. Custom Option (কাস্টম অপশন) ব্যবহার করা

আপনি চাইলে mat-option এর ভিতরে আরও কাস্টম কন্টেন্ট (যেমন, ছবি) যোগ করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select>
    <mat-option value="option1">
      <img src="path/to/image1.jpg" alt="Image 1"> Option 1
    </mat-option>
    <mat-option value="option2">
      <img src="path/to/image2.jpg" alt="Image 2"> Option 2
    </mat-option>
  </mat-select>
</mat-form-field>

Material Select এর অতিরিক্ত বৈশিষ্ট্য

1. Searchable Dropdown: Angular Material Select এ আপনি সার্চ ফিচারও যোগ করতে পারেন, যার মাধ্যমে ব্যবহারকারী দ্রুত অপশন খুঁজে পেতে পারেন।
2. Error Messages: ফিল্ড ভ্যালিডেশন এবং এরর মেসেজ সাপোর্ট।
3. Disabling Select: আপনি Select কম্পোনেন্টকে ডisable করতে পারেন [disabled] অ্যাট্রিবিউট ব্যবহার করে।

<mat-select [disabled]="isDisabled">
  <mat-option value="option1">Option 1</mat-option>
  <mat-option value="option2">Option 2</mat-option>
</mat-select>

Angular Material Select হল একটি অত্যন্ত কার্যকর এবং কাস্টমাইজযোগ্য ড্রপডাউন কম্পোনেন্ট, যা Angular অ্যাপ্লিকেশনে ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়। এটি বিভিন্ন বৈশিষ্ট্য যেমন একাধিক অপশন সিলেকশন, কাস্টম অপশন, এবং ডাইনামিক অপশন লোডিং সমর্থন করে। Angular Material Select ব্যবহার করে আপনি সহজেই সুন্দর, রেসপন্সিভ, এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এমন সিলেক্ট লিস্ট তৈরি করতে পারবেন।

Angular Material একটি জনপ্রিয় UI লাইব্রেরি যা ম্যাটেরিয়াল ডিজাইন গাইডলাইন অনুসরণ করে এবং অ্যাঙ্গুলার অ্যাপ্লিকেশনগুলির জন্য বিভিন্ন প্রি-বিল্ট কম্পোনেন্ট সরবরাহ করে। এর মধ্যে একটি জনপ্রিয় কম্পোনেন্ট হল MatSelect, যা ড্রপডাউন সিলেক্ট বক্স তৈরি করতে ব্যবহৃত হয়। মাল্টিপল সিলেকশন সাপোর্টের মাধ্যমে ব্যবহারকারীরা একাধিক অপশন সিলেক্ট করতে পারেন। এই টিউটোরিয়ালে, আমরা Angular Material এর MatSelect কম্পোনেন্ট ব্যবহার করে মাল্টিপল সিলেকশন তৈরি করার পদ্ধতি জানবো।

MatSelect কম্পোনেন্ট এবং মাল্টিপল সিলেকশন

MatSelect কম্পোনেন্টটি ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়, যেখানে multiple অ্যাট্রিবিউট যুক্ত করলে একাধিক অপশন সিলেক্ট করা সম্ভব হয়। এই ফিচারটি সাধারণত ফর্মগুলিতে, যেখানে একাধিক অপশন সিলেক্ট করার প্রয়োজন থাকে, ব্যবহৃত হয়।

মাল্টিপল সিলেকশন তৈরি করা

১. Angular Material ইন্সটল করা

প্রথমেই Angular Material ইনস্টল করতে হবে, যদি আগে থেকে ইন্সটল না থাকে:

npm install @angular/material

২. MatSelectModule ইমপোর্ট করা

আপনার app.module.ts ফাইলে MatSelectModule ইমপোর্ট করতে হবে:

import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  declarations: [AppComponent],
  imports: [MatSelectModule, MatFormFieldModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

৩. HTML কোডে মাল্টিপল সিলেকশন ব্যবহার করা

এখন MatSelect কম্পোনেন্টে multiple অ্যাট্রিবিউট ব্যবহার করে একাধিক অপশন সিলেক্ট করতে পারবেন। নিচে একটি উদাহরণ দেওয়া হলো:

<mat-form-field appearance="fill">
  <mat-label>Select multiple options</mat-label>
  <mat-select multiple [(value)]="selectedOptions">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
</mat-form-field>

৪. Typescript কোড

এখানে selectedOptions একটি অ্যারে, যা সিলেক্ট করা অপশনগুলো ধারণ করবে, এবং options হল সিলেক্ট করতে পারা অপশনগুলির একটি অ্যারে।

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
  selectedOptions = ['Option 1']; // Default selected option
}

এখানে, [(value)]="selectedOptions" ব্যবহার করা হয়েছে, যাতে সিলেক্ট করা অপশনগুলো selectedOptions অ্যারে-তে স্টোর হয়।

মাল্টিপল সিলেকশন কাস্টমাইজ করা

১. ডিফল্ট সিলেকশন

আপনি selectedOptions অ্যারে-তে ডিফল্ট ভ্যালু দিয়ে কিছু অপশন সিলেক্ট করতে পারেন। যেমন:

selectedOptions = ['Option 1', 'Option 3'];

এতে প্রথমে Option 1 এবং Option 3 সিলেক্ট হবে।

২. কাস্টম স্টাইল এবং লেবেল

আপনি mat-form-field এর appearance অ্যাট্রিবিউট ব্যবহার করে ফিল্ডের স্টাইল কাস্টমাইজ করতে পারেন:

<mat-form-field appearance="outline">
  <mat-label>Select multiple options</mat-label>
  <mat-select multiple [(value)]="selectedOptions">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
</mat-form-field>

এখানে appearance="outline" এর মাধ্যমে আউটলাইন স্টাইল প্রদান করা হয়েছে।

৩. ডাইনামিক অপশন পরিবর্তন

আপনি চাইলে options অ্যারে এর উপাদান ডাইনামিকভাবে পরিবর্তন করতে পারেন:

options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

// Dynamically adding an option
addOption(option: string) {
  this.options.push(option);
}

এটি addOption() মেথডে নতুন অপশন অ্যারে-তে যোগ করবে এবং ড্রপডাউনে তা দেখাবে।

৪. ডিফল্ট ওয়ালিডেশন

Angular Reactive Forms বা Template Driven Forms ব্যবহার করলে, আপনি mat-select এর সাথে ওয়ালিডেশন যোগ করতে পারেন। যেমন:

<mat-form-field appearance="fill">
  <mat-label>Select multiple options</mat-label>
  <mat-select multiple formControlName="selectedOptions" required>
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="formControl.hasError('required')">
    You must select at least one option
  </mat-error>
</mat-form-field>

এখানে required অ্যাট্রিবিউট ব্যবহার করে অপশন সিলেকশনের জন্য ওয়ালিডেশন যোগ করা হয়েছে।

Angular Material এর MatSelect কম্পোনেন্ট মাল্টিপল সিলেকশন করার একটি সহজ এবং কার্যকরী উপায়। এটি বিভিন্ন ধরনের ফর্মের জন্য উপযোগী, যেখানে ব্যবহারকারীকে একাধিক অপশন নির্বাচন করার সুযোগ দেওয়া হয়। multiple অ্যাট্রিবিউট ব্যবহার করে ড্রপডাউন তালিকা থেকে একাধিক আইটেম সিলেক্ট করা যায়, এবং ngFor দিয়ে অপশনগুলি ডাইনামিকভাবে তৈরি করা যায়। Angular Material এর সঠিক কনফিগারেশন ও কাস্টমাইজেশন দিয়ে আপনি একটি সুন্দর এবং ব্যবহারযোগ্য মাল্টিপল সিলেকশন ফিচার তৈরি করতে পারবেন।

Angular Material এর MatInput কম্পোনেন্ট হল একটি উন্নত, স্টাইলড ইনপুট ফিল্ড যা Material Design গাইডলাইন অনুসরণ করে। এটি ইউজার ইন্টারফেসে ইনপুট সংগ্রহের জন্য ব্যবহার করা হয় এবং অ্যাঙ্গুলার অ্যাপ্লিকেশনের ইনপুট ফিল্ডের জন্য আধুনিক, রেসপন্সিভ, এবং কাস্টমাইজযোগ্য সমাধান প্রদান করে।

MatInput কম্পোনেন্ট ব্যবহার করা

Angular Material এ ইনপুট ফিল্ড তৈরি করতে MatInput কম্পোনেন্ট ব্যবহার করা হয়। এটি সাধারণত mat-form-field কম্পোনেন্টের মধ্যে থাকে এবং এতে লেবেল, প্লেসহোল্ডার, এবং ইনপুট ধরনের অন্যান্য বৈশিষ্ট্য সংযুক্ত করা যায়।

১. MatInput কম্পোনেন্ট ব্যবহার করার জন্য প্রয়োজনীয় ধাপ

1. MatInput মডিউল ইমপোর্ট করা

প্রথমে MatInputModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করা হয়।

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [
    MatInputModule,
    MatFormFieldModule
  ]
})
export class AppModule { }

2. MatInput কম্পোনেন্ট ব্যবহার করা

এখন HTML ফাইলে mat-form-field এর মধ্যে matInput ডিরেকটিভ ব্যবহার করে ইনপুট ফিল্ড তৈরি করা যাবে।

<mat-form-field appearance="fill">
  <mat-label>Username</mat-label>
  <input matInput placeholder="Enter your username">
</mat-form-field>

এখানে:

• mat-form-field: এটি Material Design এর ইনপুট ফিল্ড কন্টেইনার।
• matInput: এটি ইনপুট ফিল্ডে Material Design স্টাইল অ্যাপ্লাই করে।
• mat-label: ইনপুট ফিল্ডের জন্য লেবেল।
• placeholder: ইনপুট ফিল্ডে প্লেসহোল্ডার টেক্সট।

ইনপুট বৈশিষ্ট্য

১. টেক্সট ইনপুট

টেক্সট ইনপুট সাধারণত ব্যবহার করা হয় ব্যবহারকারীর কাছ থেকে টেক্সট ইনপুট নেওয়ার জন্য।

<mat-form-field appearance="fill">
  <mat-label>Full Name</mat-label>
  <input matInput placeholder="Enter your full name">
</mat-form-field>

২. পাসওয়ার্ড ইনপুট

পাসওয়ার্ড ইনপুট তৈরি করতে type="password" ব্যবহার করতে হবে।

<mat-form-field appearance="fill">
  <mat-label>Password</mat-label>
  <input matInput placeholder="Enter your password" type="password">
</mat-form-field>

৩. নম্বর ইনপুট

নম্বর ইনপুটের জন্য type="number" ব্যবহার করতে হবে।

<mat-form-field appearance="fill">
  <mat-label>Age</mat-label>
  <input matInput placeholder="Enter your age" type="number">
</mat-form-field>

৪. ইমেইল ইনপুট

ইমেইল ইনপুটের জন্য type="email" ব্যবহার করা হয়, যা ইমেইল ফর্ম্যাট ভ্যালিডেশন করে।

<mat-form-field appearance="fill">
  <mat-label>Email</mat-label>
  <input matInput placeholder="Enter your email" type="email">
</mat-form-field>

MatInput এর অন্যান্য বৈশিষ্ট্য

১. Validation (ভ্যালিডেশন)

Angular Material ইনপুট ফিল্ডে ভ্যালিডেশন সহজে করা যায়। Angular Reactive Forms বা Template-driven Forms ব্যবহার করে ইনপুট ফিল্ডে ভ্যালিডেশন প্রয়োগ করা যায়।

<form [formGroup]="form">
  <mat-form-field appearance="fill">
    <mat-label>Email</mat-label>
    <input matInput formControlName="email" required>
    <mat-error *ngIf="form.get('email').hasError('required')">
      Email is required
    </mat-error>
  </mat-form-field>
</form>

এখানে, required ভ্যালিডেশন ব্যবহার করা হয়েছে এবং mat-error ট্যাগ ব্যবহার করে ত্রুটি দেখানো হয়েছে।

২. ডিসএবেল ইনপুট

ইনপুট ফিল্ডকে অক্ষম (disabled) করতে disabled অ্যাট্রিবিউট ব্যবহার করা যায়।

<mat-form-field appearance="fill">
  <mat-label>Username</mat-label>
  <input matInput placeholder="Enter your username" [disabled]="true">
</mat-form-field>

৩. স্মাল ইনপুট (Small Input)

আপনি ইনপুট ফিল্ডের আকার ছোট করতে size="small" ব্যবহার করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Country</mat-label>
  <input matInput placeholder="Enter your country" size="small">
</mat-form-field>

৪. ফোকাস এবং ব্লার ইভেন্ট

Angular Material ইনপুট ফিল্ডে focus এবং blur ইভেন্ট হ্যান্ডেল করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Username</mat-label>
  <input matInput (focus)="onFocus()" (blur)="onBlur()">
</mat-form-field>

Angular Material এর MatInput কম্পোনেন্ট ব্যবহার করে আপনি সহজেই আধুনিক, রেসপন্সিভ, এবং স্টাইলিশ ইনপুট ফিল্ড তৈরি করতে পারেন। এটি Material Design গাইডলাইন অনুসরণ করে, যা আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও সুন্দর এবং ব্যবহারকারীর জন্য উপযোগী করে তোলে। MatInput কম্পোনেন্টে লেবেল, প্লেসহোল্ডার, টাইপ, ভ্যালিডেশন, এবং কাস্টমাইজেশন এর মতো শক্তিশালী বৈশিষ্ট্যগুলি সহজেই ব্যবহার করা যায়।

Angular Material একটি জনপ্রিয় UI লাইব্রেরি যা Material Design প্রিন্সিপল অনুসরণ করে তৈরি, এবং এটি ডেভেলপারদের জন্য আধুনিক, ব্যবহারকারী-বান্ধব ইনপুট ফিল্ডসহ অনেক প্রি-বিল্ট কম্পোনেন্ট সরবরাহ করে। Material Input Field Angular Material এর অন্যতম একটি গুরুত্বপূর্ণ কম্পোনেন্ট যা সহজে কাস্টমাইজ করা যায় এবং বিভিন্ন ফর্মে ব্যবহার করা যায়।

Material Input Field এর সুবিধা

• টাইপোগ্রাফি সাপোর্ট: Material Input ফিল্ডে টাইপোগ্রাফি সাপোর্ট পাওয়া যায়, যা স্বয়ংক্রিয়ভাবে লেবেল এবং পিএলেসহোল্ডার ম্যানেজ করে।
• ফিল্ড ভ্যালিডেশন: এটি ভ্যালিডেশন ফিচার সাপোর্ট করে, যেমন Required, Minlength, Maxlength, Pattern ইত্যাদি।
• অ্যাক্সেসিবিলিটি: ইনপুট ফিল্ড গুলো অ্যাক্সেসিবিলিটির জন্যও উপযুক্ত, যেমন স্ক্রীন রিডার এবং কীবোর্ড নেভিগেশন।

Material Input Field ব্যবহার করা

Material Input ফিল্ড ব্যবহার করতে, আপনাকে Angular Material এর MatInputModule ইমপোর্ট করতে হবে এবং তারপর HTML ফাইলে matInput ডিরেকটিভ ব্যবহার করতে হবে।

১. ইন্সটলেশন এবং মডিউল ইমপোর্ট

প্রথমে Angular Material ইন্সটল করতে হবে:

ng add @angular/material

এটি ইনস্টল করার পরে, আপনার অ্যাপ্লিকেশনের app.module.ts ফাইলে MatInputModule ইমপোর্ট করুন:

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [
    MatInputModule,
    MatFormFieldModule
  ]
})
export class AppModule { }

MatFormFieldModule ব্যবহার করা হয় যাতে ইনপুট ফিল্ডগুলোকে Material Design স্টাইল অনুসারে প্রদর্শন করা যায়।

২. Material Input Field তৈরি করা

এখন, HTML ফাইলে Material Input ফিল্ড ব্যবহার করতে পারেন। নিচে এর উদাহরণ দেওয়া হলো:

<mat-form-field appearance="fill">
  <mat-label>First Name</mat-label>
  <input matInput placeholder="Enter your first name" [(ngModel)]="firstName">
</mat-form-field>

এখানে:

• mat-form-field: Material Design এর ফর্ম ফিল্ড ব্যবহার করার জন্য।
• mat-label: ইনপুট ফিল্ডের লেবেল।
• matInput: ইনপুট ফিল্ডে Material Input ডিরেকটিভ ব্যবহার করা।
• placeholder: ইনপুট ফিল্ডে প্লেসহোল্ডার টেক্সট।

এছাড়া, appearance="fill" ব্যবহার করে ইনপুট ফিল্ডের স্টাইল কাস্টমাইজ করা হয়।

৩. ভ্যালিডেশন এবং এ্যাট্রিবিউট

Material Input Field সহজেই ভ্যালিডেশন সাপোর্ট করে। আপনি required, minlength, maxlength, এবং pattern এট্রিবিউট ব্যবহার করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Email</mat-label>
  <input matInput placeholder="Enter your email" [(ngModel)]="email" required email>
  <mat-error *ngIf="email.invalid && email.touched">
    You must enter a valid email.
  </mat-error>
</mat-form-field>

এখানে:

• required: ইনপুট ফিল্ডটি পূর্ণ হওয়া প্রয়োজন।
• email: ইনপুট ফিল্ডটি ইমেল ফরম্যাটে হওয়া প্রয়োজন।
• mat-error: এটি একটি এরর মেসেজ প্রদর্শন করবে যখন ইনপুট ভ্যালিডেশন ব্যর্থ হয়।

৪. ইনপুট ফিল্ডের স্টাইলিং

Angular Material ইনপুট ফিল্ডের জন্য বিভিন্ন স্টাইলিং পছন্দ সরবরাহ করে, যেমন appearance, floatLabel, এবং color।

• appearance: ইনপুট ফিল্ডের স্টাইল পরিবর্তন করার জন্য।
  • 'legacy': পুরনো ডিজাইন।
  • 'standard': ডিফল্ট ডিজাইন।
  • 'fill': ইনপুট ফিল্ডে ব্যাকগ্রাউন্ড পূর্ণ করতে।
  • 'outline': ইনপুট ফিল্ডের চারপাশে আউটলাইন তৈরি করতে।
• floatLabel: লেবেলটি ইনপুট ফিল্ডে থাকতে অথবা ফ্লোট করতে পারে।
• color: ইনপুট ফিল্ডের রঙ পরিবর্তন করা যায়, যেমন primary, accent, অথবা warn।

<mat-form-field appearance="outline">
  <mat-label>Username</mat-label>
  <input matInput placeholder="Enter username" [(ngModel)]="username">
</mat-form-field>

এখানে, appearance="outline" দ্বারা ইনপুট ফিল্ডের চারপাশে আউটলাইন তৈরি করা হয়েছে।

Material Input Field এর কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য

• নিরাপত্তা: এটি password টাইপের ইনপুটও সমর্থন করে, যেখানে লেখা গোপন থাকে।

<mat-form-field appearance="fill">
  <mat-label>Password</mat-label>
  <input matInput placeholder="Enter your password" type="password" [(ngModel)]="password">
</mat-form-field>

• অটো কমপ্লিট: এটি autocomplete ফিচার সমর্থন করে, যা ইউজারের জন্য দ্রুত ইনপুট করার সুবিধা দেয়।

<mat-form-field appearance="fill">
  <mat-label>Search</mat-label>
  <input matInput placeholder="Search" autocomplete="on">
</mat-form-field>

Angular Material এর Material Input Field ব্যবহার করার মাধ্যমে আপনি একটি আধুনিক, ব্যবহারকারীবান্ধব এবং অ্যাক্সেসিবল ইনপুট ফিল্ড তৈরি করতে পারেন। এটি বিভিন্ন ভ্যালিডেশন, টাইপোগ্রাফি এবং স্টাইলিং সাপোর্ট করে, যা ডেভেলপারদের জন্য কাজটি সহজ করে তোলে। Angular Material এর ইনপুট ফিল্ড গুলো একটি একক, সমন্বিত ডিজাইন সিস্টেমে কাজ করে এবং Material Design গাইডলাইন অনুযায়ী সঠিকভাবে উপস্থাপিত হয়।

Angular Material এর মাধ্যমে ফর্ম তৈরি করা খুবই সহজ এবং একে শক্তিশালী ফর্ম ভ্যালিডেশন ফিচার দিয়ে সম্পন্ন করা যায়। Angular এর Reactive Forms এবং Template-driven Forms ব্যবহারের মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন করা যায়। Angular Material এর MatInputModule কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ফর্ম ইনপুট তৈরি করতে পারেন, এবং এর সাথে বিভিন্ন ধরনের ভ্যালিডেশন যুক্ত করতে পারেন।

এখানে Angular Material ইনপুট ফিল্ডের সাথে ফর্ম ভ্যালিডেশন করার বিভিন্ন ধাপ এবং কৌশল বর্ণনা করা হলো।

১. ইনপুট ফিল্ডের সাথে ফর্ম ভ্যালিডেশন

Angular Material এর MatInputModule ব্যবহার করে ফর্ম ইনপুট তৈরি করা হয়। এই ইনপুট ফিল্ডগুলির সাথে বিভিন্ন ভ্যালিডেশন যেমন Required, MinLength, MaxLength, Pattern Matching ইত্যাদি যুক্ত করা যায়।

উদাহরণ: Template-driven Forms এর মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন

Angular Material ইনপুটের সাথে ভ্যালিডেশন ব্যবহার করতে FormsModule এবং MatInputModule ইনপোর্ট করতে হবে।

১.1. মডিউল ইনপোর্ট করা

import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [MatInputModule, FormsModule],
})
export class AppModule {}

১.2. HTML ফর্ম তৈরি করা

<form #form="ngForm">
  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput name="name" [(ngModel)]="name" required minlength="3" #name="ngModel">
    <mat-error *ngIf="name.invalid && (name.dirty || name.touched)">
      Name is required and must be at least 3 characters long.
    </mat-error>
  </mat-form-field>
  
  <mat-form-field>
    <mat-label>Email</mat-label>
    <input matInput name="email" [(ngModel)]="email" required email #email="ngModel">
    <mat-error *ngIf="email.invalid && (email.dirty || email.touched)">
      Please enter a valid email address.
    </mat-error>
  </mat-form-field>

  <button mat-raised-button [disabled]="form.invalid">Submit</button>
</form>

ভ্যালিডেশন ব্যাখ্যা:

• Required: ফিল্ডটি পূর্ণ করতে হবে।
• Minlength: কমপক্ষে ৩টি অক্ষর থাকা উচিত।
• Email: সঠিক ইমেইল ফরম্যাট হওয়া উচিত।

এখানে mat-error ব্যবহার করা হয়েছে, যা ফিল্ডের ভ্যালিডেশন ত্রুটি প্রদর্শন করবে যদি ইনপুটটি অবৈধ হয়।

২. Reactive Forms এর মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন

Reactive Forms ব্যবহার করে আরও শক্তিশালী এবং কাস্টম ভ্যালিডেশন যুক্ত করা যায়। এখানে FormGroup, FormControl এবং Validators ব্যবহার করা হয়।

উদাহরণ: Reactive Forms এর মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন

২.1. মডিউল ইনপোর্ট করা

import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [MatInputModule, ReactiveFormsModule],
})
export class AppModule {}

২.2. TypeScript ফাইল তৈরি করা

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
    });
  }

  get name() { return this.form.get('name'); }
  get email() { return this.form.get('email'); }

  onSubmit() {
    if (this.form.valid) {
      console.log('Form Submitted', this.form.value);
    }
  }
}

২.3. HTML ফর্ম তৈরি করা

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput formControlName="name">
    <mat-error *ngIf="name.invalid && (name.dirty || name.touched)">
      Name is required and must be at least 3 characters long.
    </mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Email</mat-label>
    <input matInput formControlName="email">
    <mat-error *ngIf="email.invalid && (email.dirty || email.touched)">
      Please enter a valid email address.
    </mat-error>
  </mat-form-field>

  <button mat-raised-button type="submit" [disabled]="form.invalid">Submit</button>
</form>

ভ্যালিডেশন ব্যাখ্যা:

• Reactive Forms এ FormControl ব্যবহার করে ফিল্ডের ভ্যালিডেশন নির্ধারণ করা হয়।
• Validators এর মাধ্যমে বিভিন্ন ভ্যালিডেশন শর্ত যেমন required, minlength, email ইত্যাদি দেওয়া হয়।

এখানে mat-error ব্যবহার করা হয়েছে, যা ইনপুটের ভুল বা অবৈধ স্টেট শনাক্ত করলে ত্রুটি বার্তা প্রদর্শন করে।

৩. কাস্টম ভ্যালিডেশন

Angular Material এর সাথে কাস্টম ভ্যালিডেশনও ব্যবহার করা যেতে পারে, যেমন ফিল্ডের মানের উপর ভিত্তি করে ডাইনামিক ভ্যালিডেশন তৈরি করা।

উদাহরণ: কাস্টম ভ্যালিডেটর তৈরি

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function customValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const forbidden = /admin/.test(control.value);
    return forbidden ? { 'forbiddenName': { value: control.value } } : null;
  };
}

এখন এই কাস্টম ভ্যালিডেটরটি ইনপুট ফিল্ডে ব্যবহার করতে পারেন:

this.form = this.fb.group({
  username: ['', [Validators.required, customValidator()]]
});

Angular Material এর মাধ্যমে ইনপুট ফিল্ডের সাথে ফর্ম ভ্যালিডেশন করা খুবই সহজ এবং কার্যকরী। আপনি Template-driven Forms অথবা Reactive Forms ব্যবহার করে ফর্মের ভ্যালিডেশন করতে পারেন। Angular এর বিল্ট-ইন Validators এর পাশাপাশি কাস্টম ভ্যালিডেটর ব্যবহার করে আরও উন্নত ফর্ম ভ্যালিডেশন তৈরি করা সম্ভব। Angular Material এর কম্পোনেন্ট যেমন MatInputModule, MatFormFieldModule, এবং MatErrorModule এর মাধ্যমে ফর্মকে আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করা যায়।